<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title></title>
		<meta name="description" content="Neat">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
		<link rel="stylesheet" href="index.css">
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/demo/sweetalert-master-150108224250/lib/sweet-alert.js"></script>
		<link rel="stylesheet" href="https://www.jq22.com/demo/sweetalert-master-150108224250/lib/sweet-alert.css">
		<script src="https://www.jq22.com/demo/copy20161120/dist/clipboard.min.js"></script>
		<style>
			.form-group .text-input {
				text-indent: 10px
			}

			.items-group .item .icon {
				color: red;
				border-color: red
			}

			.items-group .item .icon:hover {
				background-color: red;
				color: white
			}
		</style>
	</head>
	<body>

		<div class="main-group">
			<h1 style="font-size: 28px;text-align: center;">报平安选择</h1>
			<div class="form-group">
				<div class="form" id="form">

					<select name="" id="classNum" class="text-input">
						<option value="00">选择班级</option>
					</select>
					<select name="" id="month" class="text-input">
						<option value="00">选择月</option>
						<option value="8">8月</option>
						<option value="9">9月</option>
					</select>
					<select name="" id="day" class="text-input">
						<option value="00">选择日期</option>
					</select>

					<button type="submit" class="btn submit-btn" onclick="set()">查询</button>
				</div>
			</div>
			<div>
				<ul class="items-group" id="nos">
				</ul>
			</div>
			<div class="btn-group">
				<button class="del-btn">复制</button>
			</div>

			<div class="icon success animate" style="display: block;"> <span class="line tip animateSuccessTip"></span>
				<span class="line long animateSuccessLong"></span>
				<div class="placeholder"></div>
				<div class="fix"></div>
			</div>
		</div>
		<div id="nos2" style="position: absolute;top:-100%">

		</div>

	</body>
</html>
<script type="text/javascript">
	$("#nos")[0].style.maxHeight = "100%"
	$.get(`https://39.107.221.29/studentBpa/classNum.php`,
		function(data, status) {
			data = JSON.parse(data)
			for (let i of data.number.split(",")) {
				$("#classNum")[0].innerHTML += `<option value="${i}">22${i<10?"0"+i:i}</option>`
			}
		})
	for (let i of $("#month")[0]) {
		if (i.value == new Date().getMonth() + 1) {
			i.selected = "selected"
		}
	}
	for (let i = 1; i <= 31; i++) {
		$("#day").append(`<option value="${i}">${i}</option>`)
	}

	for (let i of $("#day")[0]) {
		if (i.value == new Date().getDate()) {
			i.selected = "selected"
		}
	}

	function set() {
		let classNum = $("#classNum").val()
		let month = $("#month").val()
		let day = $("#day").val()
		$.get(`https://39.107.221.29/studentBpa/look.php?month=${month}&day=${day}&classNum=${classNum}`, function(data,
			status) {
			if (data == "") {
				swal({
					title: " 查询失败",
					type: "error",
					text: "我也不知道为什么",
					confirmButtonText: "好的"
				});
			} else {
				data = JSON.parse(data)[0]
				// $("#yes")[0].innerHTML = ""
				$("#nos").html("")
				$("#nos2").html(`${classNum}班${month}月${day}日未登记：<br>`)
				for (let i of data) {
					if (!i.name) {
						if (i['1'] == "name") continue
						$("#nos")[0].innerHTML += `
							<li class="item" style="left: 0px; opacity: 1;">
							<span class="text">${i['1'].trim()}(${i['0']}号)</span>
							<span class="icon">X</span></li>`
						$("#nos2").append(`${i['0']}号${i['1'].trim()}<br>`)
						// continue
					}
					// $("#yes")[0].innerHTML += `
					// 	<li class="item" style="left: 0px; opacity: 1;">
					// 	<span class="text">${i.name}(${i.student})</span>
					// 	<span class="icon">√</span></li>`

				}

			}
		})
		// alert("数据: " + data + "\n状态: " + status);
	}

	let clipboard = new Clipboard('.del-btn', {
		target: function() {
			return document.querySelector('#nos2');
		}
	});

	clipboard.on('success', function(e) {
		console.log(e);
		swal({
			title: "复制成功",
			type: "success",
			text: "好耶",
			confirmButtonText: "好的"
		});
	});

	clipboard.on('error', function(e) {
		console.log(e);
		swal({
			title: "复制失败",
			type: "error",
			text: "我也不知道为什么",
			confirmButtonText: "好的"
		});
	});
</script>
